<template>
	<view class="">
		<!-- 加载动画 -->
		<orange-fullloading
			text="加载中"
			:loadshow="loadingStatus">
		</orange-fullloading>
		<!--头部-->
		<view class="user-header w-100 bg-color" style="height: 300rpx;">
			<!-- 未登陆前 -->
			<view class="row-ac ml-2" style="padding-top: 140rpx;" v-if="!loginStatus" @tap="nvaTo('/pages/public/login')">
				<image :src="userInfo.image" class="border rounded-50" style="width: 120rpx;height: 120rpx;" mode=""></image>
				<view class="flex-1 ml-2"><view class="font-s-4 font-w">登陆 / 注册</view></view>
			</view>
			<!-- 登陆后 -->
			<view class="row-ac ml-2" style="padding-top: 140rpx;" v-else>
				<image :src="userInfo.image" class="border rounded-50" style="width: 120rpx;height: 120rpx;" mode=""></image>
				<view class="flex-1 ml-2">
					<view class="font-s-5 font-w">{{ userInfo.name }}</view>
					<view class="font-s-3">ID:{{ userInfo.id }}</view>
				</view>
			</view>
			<!-- <view class="row-ac mt-5">
				<view class="row-a-j-fc flex-1">
					<view>{{ userInfo.money || 0 }}</view>
					<view>余额</view>
				</view>
				<view class="row-a-j-fc flex-1">
					<view>{{ userInfo.point || 0 }}</view>
					<view>积分</view>
				</view>
				<view class="row-a-j-fc flex-1">
					<view>{{ userInfo.money || 0 }}</view>
					<view>收益</view>
				</view>
			</view> -->
		</view>
		<!-- 订单 -->
		<view class="user-box ml-2 mr-2 mt-2 bg-white rounded">
			<view class="row-ac-sb p-2 border-bottom">
				<view class="font-w">我的订单</view>
				<view class="font-s-4 text-light-grey" @click="toOrder(0)">
					全部
					<text class="iconfont icon-xiangxia font-s-s"></text>
				</view>
			</view>
			<view class="row-ac">
				<view class="d-f  flex-1 row">
					<view class="row-a-j-fc" style="height: 150rpx;" @tap="toOrder(1)">
						<view class="iconfont icon-daifukuan font-s-8"></view>
						<view class="font-s-3 mt-1">待付款</view>
					</view>
					<view v-if="userInfo.paymentCount >0" class="rounded-50 bg-color row font-s-2" style="width: 35rpx;height: 35rpx;margin-left: -30rpx;margin-top: -90rpx;">{{userInfo.paymentCount}}</view>
				</view>
				<view class="d-f  flex-1 row" @tap="toOrder(2)">
					<view class="row-a-j-fc" style="height: 150rpx;">
						<view class="iconfont icon-daishouhuo1 font-s-8"></view>
						<view class="font-s-3 mt-1">待发货</view>
					</view>
					<view v-if="userInfo.stateSendCount >0" class="rounded-50 bg-color row font-s-2" style="width: 35rpx;height: 35rpx;margin-left: -30rpx;margin-top: -90rpx;">{{userInfo.stateSendCount}}</view>
				</view>
				<view class="d-f  flex-1 row" @tap="toOrder(3)">
					<view class="row-a-j-fc" style="height: 150rpx;">
						<view class="iconfont icon-yiwancheng font-s-8"></view>
						<view class="font-s-3 mt-1">待收货</view>
					</view>
					<view v-if="userInfo.forwardsCount >0" class="rounded-50 bg-color row font-s-2" style="width: 35rpx;height: 35rpx;margin-left: -30rpx;margin-top: -90rpx;">{{userInfo.forwardsCount}}</view>
				</view>
				<view class="d-f  flex-1 row" @tap="toOrder(4)">
					<view class="row-a-j-fc" style="height: 150rpx;">
						<view class="iconfont icon-pingjia font-s-8"></view>
						<view class="font-s-3 mt-1">待评价</view>
					</view>
					<view v-if="userInfo.evaluateCount >0" class="rounded-50 bg-color row font-s-2" style="width: 35rpx;height: 35rpx;margin-left: -30rpx;margin-top: -90rpx;">{{userInfo.evaluateCount}}</view>
				</view>
			</view>
		</view>
		<!-- 积分商城 -->
		<!-- <view class="user-box ml-2 mr-2 mt-2 bg-white rounded">
			<view class="row-ac-sb p-2 border-bottom">
				<view class="font-w">积分兑好物</view>
				<view class="font-s-4 text-light-grey">
					积分商城
					<text class="iconfont icon-xiangxia font-s-3"></text>
				</view>
			</view>
			<view class="row-ac-sb" style="height: 150rpx;">
				<view class="row-ac">
					<view class="row iconfont icon-jifen text-danger font-s-8" style="width: 100rpx;height: 100rpx;"></view>
					<view class="ml-1">
						<view>
							积分余额:
							<text class="text-main-color ml-2">{{ userInfo.point }}</text>
						</view>
						<view class="font-s-2 text-light-grey">积分即将过期，可兑换商品</view>
					</view>
				</view>
				<view class="exchange-now mr-2 bg-color row font-s-3">立即兑换</view>
			</view>
		</view> -->
		<!--服务-->
		<view class="user-box rounded ml-2 mr-2 mt-2 bg-white">
			<view class="row-ac p-2 border-bottom"><view class="font-w">商城服务</view></view>
			<view class="row-ac-fw">
				<view class="row-a-j-fc" style="width: 25%; height: 150rpx;" v-for="(item, index) in servicesList" :key="index">
					<view class="iconfont font-s-8 text-main-color" :class="item.icon"></view>
					<view class="font-s-3 mt-1">{{ item.servicename }}</view>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<!-- 微信登陆状态下才显示 -->
				<view class="row-a-j-fc" style="width: 25%; height: 150rpx;" v-if="loginStatus" @click="nvaTo('/pages/user/configure/set')">
					<view class="iconfont icon-shezhi2 font-s-8 text-main-color"></view>
					<view class="font-s-3 mt-1">设置</view>
				</view>
				<!-- #endif -->
			</view>
		</view>
		<view class="guess-you-like mt-2">
			<view class="row mb-2">
				<view class="flex-1 bg-hover-light ml-2" style="height: 2rpx;"></view>
				<view class="font-s-5 ml-2 mr-2">热门推荐</view>
				<view class="flex-1 bg-hover-light mr-2" style="height: 2rpx;"></view>
			</view>
			<product-list :list="hotGoodslist"></product-list>
		</view>
	</view>
</template>

<script>
import productList from '@/components/common/product-list'; //商品列表公共组件
import { userInfo as userInfoUrl, getHotGoods } from '@/api/index';
import { mapState } from 'vuex';

export default {
	components: {
		productList
	},
	data() {
		return {
			// 用户信息
			userInfo: {
				// 用户id
				id: '',
				// 昵称
				name: '',
				// 头像
				image: '/static/img/header-img.png',
				// 积分
				point: '登录后可查看',
				// 余额
				money: '',
				// 邮箱
				email: ''
			},
			servicesList: this.$Management.mallServices,
			hotGoodslist: [],
			// 登录状态
			loginStatus: false,
			loadingStatus: true
		};
	},
	computed: {},
	onLoad() {
		this.initData();
	},
	onShow() {
		this.initData();
	},
	methods: {
		async initData() {
			await this.getHotGoods();
			await this.getUserInfo();
			// 异步延迟加载
			setTimeout(() => {
				this.loadingStatus = false
			}, 100)
		},
		nvaTo(url) {
			uni.navigateTo({
				url
			});
		},
		//顶部设置和消息点击事件
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				//点击设置时如果没有登陆跳转登陆页面登陆后返回
				if (!this.loginStatus) {
					uni.navigateTo({
						url: '/pages/public/login'
					});
					uni.navigateBack({
						delta: 1
					});
				} else {
					uni.navigateTo({
						url: '/pages/user/configure/set'
					});
				}
			}
			if (e.index === 1) {
				//点击消息时如果没有登陆跳转登陆页面登陆后返回
				if (!this.loginStatus) {
					uni.navigateTo({
						url: '/pages/public/login'
					});
					this.$store.commit('login', res);
					uni.navigateBack({
						delta: 1
					});
				} else {
					uni.showToast({
						title: '前往消息页',
						icon: 'none'
					});
				}
			}
		},
		async getUserInfo() {
			/*let token = uni.getStorageSync('token');
			let userInfo = uni.getStorageSync('userInfo');
			console.log(userInfo);
			console.log(token);
			if (token == '' && userInfo == '') {
				this.loginStatus = false;
				this.userInfo = {
					// 用户id
					id: '',
					// 昵称
					name: '',
					// 头像
					image: '/static/img/header-img.png',
					// 积分
					point: '登录后可查看',
					// 余额
					money: '',
					// 邮箱
					email: ''
				};
			}
			if (token != '') {
				// 如果token不为空，缓存中的userInfo为空，重新获取用户信息
				if (userInfo == '' || JSON.stringify(userInfo) == '{}') {
					await this.$R.get(userInfoUrl).then(res => {
						console.log(res);
						let resUserInfo = res.data;
						uni.setStorage({ key: 'userInfo', data: resUserInfo });
						uni.setStorage({ key: 'weChatOpenId', data: resUserInfo.openid });
						this.userInfo = resUserInfo;
						this.loginStatus = true;
					});
				}else {
					this.userInfo = userInfo
					this.loginStatus = true;
				}
			}*/
			let token = uni.getStorageSync('token')
			console.log(token)
			if(token!=''){
				await this.$R.get(userInfoUrl).then(res => {
					console.log(res);
					let resUserInfo = res.data;
					uni.setStorage({ key: 'userInfo', data: resUserInfo });
					uni.setStorage({ key: 'weChatOpenId', data: resUserInfo.openid });
					this.userInfo = resUserInfo;
					this.loginStatus = true;
				});
			}else {
				this.loginStatus = false
				this.userInfo ={
					// 用户id
					id: '',
					// 昵称
					name: '',
					// 头像
					image: '/static/img/header-img.png',
					// 积分
					point: '登录后可查看',
					// 余额
					money: '',
					// 邮箱
					email: ''
				}
			}

		},
		getHotGoods() {
			this.$R.get(getHotGoods).then(res => {
				this.hotGoodslist = res.data.list;
			});
		},
		toOrder(orderTypeId) {
			if (!this.loginStatus) {
				uni.navigateTo({
					url: '/pages/public/login'
				});
			} else {
				uni.navigateTo({
					url: '/pages/order/order?orderTypeId='+orderTypeId
				});
			}
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: $uni-bg-color-grey;
}

.user-box {
	width: 722rpx;
}

.exchange-now {
	width: 130rpx;
	height: 45rpx;
	border-radius: 20rpx;
}
</style>
